<script setup lang="ts">
import { ref } from 'vue'

// 项目数据
const projects = ref([
  {
    id: 1,
    name: 'XPL（二段）',
    time: '2025-9-26 10:00',
    participants: 120,
    totalEarnings: 13200,
    avgEarnings: 110
  },
  {
    id: 2,
    name: 'XPL（一段）',
    time: '2025-9-25 17:00',
    participants: 100,
    totalEarnings: 12000,
    avgEarnings: 120
  },
  {
    id: 3,
    name: 'COAI',
    time: '2025-9-24 19:00',
    participants: 100,
    totalEarnings: 12000,
    avgEarnings: 120
  },
  {
    id: 4,
    name: 'GAIN',
    time: '2025-9-23 10:00',
    participants: 100,
    totalEarnings: 12000,
    avgEarnings: 120
  }
])

// 格式化数字为货币格式
const formatCurrency = (amount: number): string => {
  return `$${amount.toLocaleString()}`
}
</script>

<template>
  <div class="project-history">
    <div class="header">
      <h3 class="title">项目历史及收益</h3>
      <div class="more-link">
        <a href="">更多>></a>
      </div>
    </div>
    
    <div class="project-list">
      <div 
        v-for="project in projects" 
        :key="project.id" 
        class="project-item"
      >
        <div class="project-header">
          <h4 class="project-name">{{ project.name }}</h4>
          <span class="project-time">{{ project.time }}</span>
        </div>
        
        <div class="project-data">
          <div class="data-item">
            <div class="data-value">{{ project.participants }}</div>
            <div class="data-label">参与账号数目</div>
          </div>
          
          <div class="data-item">
            <div class="data-value">{{ formatCurrency(project.totalEarnings) }}</div>
            <div class="data-label">空投收益总数</div>
          </div>
          
          <div class="data-item">
            <div class="data-value">{{ formatCurrency(project.avgEarnings) }}</div>
            <div class="data-label">平均账号收益</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.project-history {
  background: #fff;
  border: 1px solid #f6f6f7;
  border-radius: 12px;
  padding: 18px 16px;
  width: 100%;
  max-width: 348px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  display: none; /* PC端默认隐藏 */
}

/* 标题区域 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  color: #0e0e0e;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.subtitle {
  color: #8a8a8a;
  font-size: 16px;
  font-weight: 400;
}

.more-link {
  color: #409eff;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}

.more-link a {
  color: inherit;
  text-decoration: none;
}

.more-link:hover {
  color: #337ecc;
}

/* 项目列表 */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 项目项 */
.project-item {
  background: #ffffff;
  border: 1px solid #f6f6f6;
  border-radius: 12px;
  padding: 12px 22px 20px;
  transition: all 0.3s ease;
}

.project-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  border-color: #409eff;
}

/* 项目头部 */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.project-name {
  color: #282828;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.project-time {
  color: #c9c9c9;
  font-size: 14px;
  white-space: nowrap;
}

/* 项目数据 */
.project-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

.data-item {
  text-align: center;
}

.data-value {
  color: #5a5a5a;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
}

.data-label {
  color: #8a8a8a;
  font-size: 16px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .project-history {
    display: block;
    padding: 12px;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .header {
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-size: 18px;
  }

  .more-link {
    font-size: 16px;
  }

  .project-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
  }

  .project-name {
    font-size: 18px;
  }

  .project-data {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
  }

  .data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
  }

  .data-value {
    font-size: 16px;
  }

  .data-label {
    font-size: 14px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .project-history {
    background: #1a1a1a;
    border-color: #404040;
    color: #fff;
  }

  .title {
    color: #fff;
  }

  .project-item {
    background: #2d2d2d;
    border-color: #404040;
  }

  .project-name {
    color: #fff;
  }

  .project-time {
    color: #999;
  }

  .data-value {
    color: #fff;
  }

  .data-label {
    color: #999;
  }

  .data-item {
    border-bottom-color: #404040;
  }
}
</style>